<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addCommunityMap,getTileUrl,getCommunityCopyrights" />
  <title>HERE Maps API Example: Quad Key Based Map</title>
    <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-params="maps"
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />
</head>
<body>
  <h1>Quad Key Based Map</h1>
  <p>This map shows the community Map tile overlay for HERE Maps which includes
    additional crowd sourced street and building information. The community
    map tiles have been retrieved using a quad key algorithm. The map is initially
    centered over Torshavn in the Faroe Islands, and the map displays a series of
    additional unverified roads over the base map.
  </p>
  <p>
    The URL for each base map tile starts with:
    <ul>
    <li><code>http://[1-4].communitymaptiles.nokia.com/tilehub/live/map/png/</code></li>
    </ul>
  </p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>

<script>
//<![CDATA[
function getCommunityCopyrights(area, zoomLevel) {
  // When using tiles returned from the community server,
  // ensure the correct HERE Copyright is displayed.
  return nokia.maps.map.Display.NORMAL_COMMUNITY.getCopyrights(area, zoomLevel);
}

function getTileUrl(level, row, col) {
  var quadKey = [''],
    digit,
    mask,
    qk;

  for (var i = level; i > 0; i--) {
    digit = '0';
    mask = 1 << (i - 1);
    if ((col & mask) != 0) {
      digit++;
    }
    if ((row & mask) != 0) {
      digit++;
      digit++;
    }
    quadKey.push(digit);
  }
  qk = quadKey.toString().replace(/\,/g, '');
  return ['http://1.communitymaptiles.nokia.com/tilehub/live/map/png/',
    qk, '?app_id=', nokia.Settings.app_id,
    'app_code=', nokia.Settings.app_code].join('');
}



function addCommunityMap(map) {

  var communityMapProvider = new nokia.maps.map.provider.ImgTileProvider({
    label: 'normal.day',
    description: 'HERE Maps Community Map tile provider',
    width: 256,
    height: 256,
    min: 0,
    max: 23,
    getUrl: getTileUrl,
    getCopyrights : getCommunityCopyrights
  });
  map.overlays.add(communityMapProvider);
}

function afterHereMapLoad(map) {
  map.set('center', [62.0196, -6.755]);
  map.set('zoomLevel', 14);
  addCommunityMap(map);
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
